<script lang="ts" setup>
import * as courseApi from "@/api/train/course";

const props = defineProps({
  id: {
    type: String,
    required: true,
  },
});

const article = ref<CourseArticle | null>(null);
courseApi.getCourseArticleById(+props.id).then((res) => {
  article.value = res.data;
});
</script>

<template>
  <div class="bg-white">
    <div>
      <nut-image
        class="w-full max-h-[50vh]"
        :src="article?.articleCover"
        fit="cover"
        show-loading
      />
      <h1 class="p-3 text-2xl">{{ article?.articleName }}</h1>
    </div>
    <div class="p-3 pt-0 flex flex-col items-center" v-html="article?.articleContent || ''"></div>
    <nut-divider class="px-3">到底啦 ~</nut-divider>
  </div>
</template>

<style scoped></style>
